<template>
  <div class="body">
    <div class="menu_box">
    <div class="menu_bar">
      <div class="logo">
        <img src="../assets/home/y.png" alt="" />
      </div>
      <div class="items">
        <div
          class="item"
          v-for="(item, index) in tabList"
          :key="index"
          @click="tabChange(index)"
        >
          {{ item }}
        </div>
      </div>
    </div>
    </div>
    <router-view />
    <div class="foot">
      <div class="foot_box">
        <div class="title" v-for="(item, key) in footList" :key="key">
          {{ item.title }}
          <div class="items_box">
            <div
              class="items"
              v-for="(items, index) in item.detailList"
              :key="index"
            >
              {{ items }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Other",
  data() {
    return {
      tabList: [
        "主页",
        "上贤简介",
        "软研方向",
        "科研方向",
        "团队现状",
        "所获奖项",
        "聚贤时光",
      ],
      footList: [
        {
          title: "上贤简介",
          detailList: ["前身背景", "上贤现状", "未来展望"],
        },
        {
          title: "软研方向",
          detailList: ["前端", "后端", "UI","产品经理"],
        },
        {
          title: "科研方向",
          detailList: ["因果分析与统计", "推荐系统", "芯片","图像处理"],
        },
        {
          title: "团队现状",
          detailList: [],
        },
        {
          title: "所获奖项",
          detailList: ["国家级", "省级", "校级"],
        },
        {
          title: "聚贤时光(社区)",
          detailList: [],
        },
      ],
    };
  },
  mounted: function () {},
  methods: {
    tabChange: async function (e) {
      switch (e) {
        case 0:
          console.log(e);
          this.$router.push("/Home");
          const { data: res } = await this.$http.get("tableDataOne");
          console.log(res.dataSource);
          break;
        case 1:
          console.log(e);
          this.$router.push("/About");
          break;
        case 2:
          console.log(e);
          this.$router.push("/Software");
          break;
        case 3:
          console.log(e);
          this.$router.push("/Science");
          break;
        case 4:
          console.log(e);
          this.$router.push("/TeamStatus");
          break;
        case 5:
          console.log(e);
          this.$router.push("/Awards");
          break;
        case 6:
          console.log(e);
          this.$router.push("/Community");
          break;
        default:
          break;
      }
    },
  },
};
</script>

<style lang="less" scoped>
.body {
  width: 100vw;
  height: 100%;
  .menu_box{
    width: 100%;
    padding-bottom: 5px;
    // background: #f7f7f7;
        background: linear-gradient(to bottom, #E0E0E0 0%, #FFF 100%);
  .menu_bar{
    width: 1000px;
    height: 175px;
    margin: 0 auto;
    margin-bottom: 10px;
    .logo {
      padding-top: 20px;
      width: 228px;
      height: 72px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .items {
      width: 100%;
      height: 50px;
      margin-top: 20px;
      padding-top: 10px;
      border-top: solid #e3e3e3 2px;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .item {
        height: 100%;
        line-height: 50px;
        padding: 0 30px;
      }
      .item:hover {
        color: #fff;
        background-color: #e3e3e3;
        cursor: pointer;
      }
    }
  }
  }
  
  .foot {
    width: 100%;
    background: #E0E0E0;
    .foot_box {
      width: 1000px;
      padding: 30px 0;
      margin: 0 auto;
      display: flex;
      justify-content: space-around;
    }
    .title {
      width: 120px;
      text-align: center;
      .items_box {
        margin-top: 15px;
        .items {
          font-size: 10px;
          color: #797979;
          margin-bottom: 8px;
        }
        .items:hover{
          cursor: pointer;

        }
      }
    }
  }
}
</style>